<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      姓:<input type="text" v-model="firstName" /> <br />
      名:<input type="text" v-model="lastName" /> <br />
      全名:<span>{{fullName}}</span> <br />
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
          firstName: "张",
          lastName: "三",
        },
        computed: {
          // #region 完整写法
          // fullName: {
          //   get() {
          //     console.log("get被调用了");
          //     return this.firstName + "-" + this.lastName;
          //   },
          //   set(value) {
          //     console.log("set", value);
          //     const arr = value.split("-");
          //     this.firstName = arr[0];
          //     this.lastName = arr[1];
          //   },
          // },
          // #endregion

          // 简写
          fullName() {
            console.log("get被调用了");
            return this.firstName + "-" + this.lastName;
          },
        },
      });
    </script>
  </body>
</html>
